<template>
  <div class="m-adorn-pc">
    <!-- 店铺导航 -->
    <pc-nav :navList="navList"></pc-nav>
    <div>
      <div v-for="(floor, index) in floorList" :key="index">
        <!-- 店铺banner -->
        <div v-if="floor.floorType === 'Banner'">
          <w-banner @refress="handlerFloorList" :banners="bannerInfo" :edit="true" @add="addNewFloorByForm" @delete="deleteFloor"></w-banner>          
        </div>
        <!-- 商品导航 -->
        <div v-if="floor.floorType === 'Classify'">
          <goods-nav @refress="handlerFloorList" :goodsNav="goodsNav" @add="addNewFloorByForm" @delete="deleteFloor"></goods-nav>         
        </div>
        <!-- 店家推荐 -->
        <div v-if="floor.floorType === 'Templet3'">
          <recommend :floor="recommendFloor" @add="addNewFloorByForm" @delete="deleteFloor"></recommend>         
        </div>
        <!-- 新款发布  -->
        <div v-if="floor.floorType === 'Templet2'">
          <new-style :floor="newStyleFloor" @add="addNewFloorByForm" @delete="deleteFloor"></new-style>         
        </div>
        <!-- 尾货清仓  -->
        <div v-if="floor.floorType === 'Templet'">
          <goods-clear :floor="goodsClearFloor" @add="addNewFloorByForm" @delete="deleteFloor"></goods-clear>       
        </div>
      </div>
    </div>

    <!-- 判断楼层是否已装修，若没有，则展示空楼层 -->
    <div v-if="floorList.length != 5 && Object.keys(bannerInfo).length == 0">
      <w-banner @refress="handlerFloorList" :banners="bannerInfo" :edit="true" @add="addNewFloorByForm" @delete="deleteFloor"></w-banner>
    </div>
    <div v-if="floorList.length != 5 && Object.keys(goodsNav).length == 0">
      <goods-nav @refress="handlerFloorList" :goodsNav="goodsNav" @add="addNewFloorByForm" @delete="deleteFloor"></goods-nav>
    </div>
    <div v-if="floorList.length != 5 && Object.keys(recommendFloor).length == 0">
      <recommend :floor="recommendFloor" @add="addNewFloorByForm" @delete="deleteFloor"></recommend>
    </div>
    <div v-if="floorList.length != 5 && Object.keys(newStyleFloor).length == 0">
      <new-style :floor="newStyleFloor" @add="addNewFloorByForm" @delete="deleteFloor"></new-style>
    </div>
    <div v-if="floorList.length != 5 && Object.keys(goodsClearFloor).length == 0">
      <goods-clear :floor="goodsClearFloor" @add="addNewFloorByForm" @delete="deleteFloor"></goods-clear>       
    </div>
  </div>
</template>

<script>
  import Nav from './nav'
  import FloorHeader from './floorHeader'
  import GoodsNav from './goodsNav'
  import GoodsClear from './clear'
  import NewStyle from './newStyle'
  import Recommend from './recomment'

  // 导入接口
  import { apiAdornPC } from '../../../common/api'

  export default {
    data() {
      return {
        show: false,
        title: '标题',
        goodsNav: {},
        navList: ['女装', '男装'],
        bannerInfo: {},
        tmplList: [],
        floorList: [], // 所有楼层数据
        floorType: '',
        // 商品推荐
        recommendFloor: {},
        // 新款发布样式
        newStyleFloor: {},
        // 尾货清仓数据
        goodsClearFloor: {}
      }
    },
    created() {
      this.handlerFloorList()
    },
    methods: {
      /**
       * 获取楼层列表
       */
      handlerFloorList() {
        // 初始化轮播图
        this.bannerInfo = {}

        // 初始化导航
        this.goodsNav = {}
        // 初始化模板列表
        this.tmplList = []

        apiAdornPC.getFloorList('PC', this.$store.getters.token).then((data) => {
          // 如果获取的楼层列表为空
          if (!data.list || data.list.length == 0) {
            return
          }
          this.floorList = data.list

          // 将获取的数据分发
          data.list.forEach((v) => {
            this.floorType = v.floorType
            // 如果当前是banner
            if (v.floorType == 'Banner') {
              this.bannerInfo = v
            }

            // 如果当前是分类
            if (v.floorType == 'Classify') {
              this.goodsNav = v
            }

            // 如果当前是新品上市模板
            if (v.floorType == 'Templet2') {
              this.newStyleFloor = v
            }

            // 如果当前是商品推荐
            if (v.floorType == 'Templet3') {
              this.recommendFloor = v
            }

            // 如果当前是尾单清仓
            if (v.floorType == 'Templet') {
              this.goodsClearFloor = v
            }
          })
        })
      },

      /**
       * 新增新楼层
       * @param { Object } params 参数
       */
      addNewFloor(params) {
        apiAdornPC.addFloor(params).then((data) => {
          this.handlerFloorList()

          // 如果有回调方法，则执行回调方法
          if (typeof params.callback == 'function') {
            params.callback()
          }
        })
      },

      /**
       * 新增新楼层
       * @param { Object } params 参数
       */
      addNewFloorByForm(callback) {
        // 提交表单
        $('form').ajaxSubmit((data) => {
          // 登录信息失效
          if (data.code == '314') {
            this.$toast('用户登录信息失效，请重新登录', () => {
              this.$router.push({path: '/login'})
            })
            return
          }

          // 如果新增失败，则弹框提示
          if (data.code != 200) {
            this.$toast(data.msg)
            return
          }

          // 刷新数据
          this.handlerFloorList()

          // 如果有回调方法，则执行回调方法
          if (typeof callback == 'function') {
            callback()
          }
        })
      },

      /**
       * 删除楼层
       *
       * @params { Object } params 参数
       */
      deleteFloor(params) {
        apiAdornPC.deleteFloor(params.id, this.$store.getters.token, 'PC').then((data) => {
          // 请求数据
          this.handlerFloorList()

          // 如果有回调，则执行回调方法
          if (typeof params.callback == 'function') {
            params.callback()
          }
        })
      }
    },
    components: {
      'pc-nav': Nav,
      FloorHeader,
      GoodsNav,
      GoodsClear,
      NewStyle,
      Recommend
    }
  }
</script>

<style lang="scss" scoped>
  @import './style.scss';
</style>